import React, { useEffect, useState } from "react";
import { NavBar, Dialog, Swiper } from "react-vant";
import { useNavigate } from "react-router-dom";
import { Search } from "@react-vant/icons";
import swiper1 from "../../assets/swiper1.png";
import swiper2 from "../../assets/swiper2.png";
import swiper3 from "../../assets/swiper3.png";
import swiper4 from "../../assets/swiper4.png";
import zheng from "../../assets/zheng.png";
import SwiperGird from "../../components/SwiperGird/index";
import { Arrow } from "@react-vant/icons";
import hua from "../../assets/hua.png";
import { Tabs } from "antd-mobile";
import http from "../../utils/http";
import "./index.css";
import TabsShop from "../../components/tabsShop/index";
interface Shop {
  id: string;
  name: string;
  price: number;
  image: string;
}
const Index: React.FC = () => {
  const navigate = useNavigate();
  const [ShopList, setShopList] = useState([] as Shop[]);
  //  获取数据
  const getShopList = () => {
    http.get("/restorative/list").then((res) => {
      setShopList(res.data.data);
    });
  };

  {
    /* 弹窗 */
  }
  const getDialog = () => {
    Dialog.confirm({
      title: "知情协议",
      message:
        "当您在线咨询时，我们可能会收集您或您亲友的病情描述、用药记录、过敏史、姓名、身份证号码、复诊凭证图片。我们收集您或您亲友的上述信息是为了了解您的问题，向您或您亲友提供用药咨询服务若您或您亲友不同意我们收集上述信息，您将无法咨询药师，但不影响您正常使用我已们的其他服务",
      confirmButtonText: "同意",
      cancelButtonText: "不同意",
    });
  };
  useEffect(() => {
    getDialog();
    getShopList();
  }, []);

  return (
    <div className="shop-box">
      <NavBar title="妙手商场" leftArrow={false} />
      {/* 搜索 */}
      <div className="search" onClick={() => navigate("/shopsearch")}>
        <span className="icon">
          <Search />
        </span>
        <input className="input" type="text" placeholder="复方甘草酸苷片" />
        <button className="btn">搜索</button>
      </div>
      {/* 轮播图 */}
      <div className="swiper">
        <Swiper
          autoplay={3000}
          style={{ width: "100%", height: "30vh", borderRadius: "10px" }}
        >
          <Swiper.Item style={{ width: "100%", height: "30vh" }}>
            <img
              style={{ width: "100%", height: "30vh" }}
              src={swiper1}
              alt=""
            />
          </Swiper.Item>
          <Swiper.Item style={{ width: "100%", height: "30vh" }}>
            <img
              style={{ width: "100%", height: "30vh" }}
              src={swiper2}
              alt=""
            />
          </Swiper.Item>
          <Swiper.Item style={{ width: "100%", height: "30vh" }}>
            <img
              style={{ width: "100%", height: "30vh" }}
              src={swiper3}
              alt=""
            />
          </Swiper.Item>
          <Swiper.Item style={{ width: "100%", height: "30vh" }}>
            <img
              style={{ width: "100%", height: "30vh" }}
              src={swiper4}
              alt=""
            />
          </Swiper.Item>
        </Swiper>
      </div>
      {/* 正品保证 */}
      <div className="shop-box-zheng">
        <img style={{ width: "100%", height: "100%" }} src={zheng} alt="" />
      </div>
      {/* 组建swipergird */}
      <div
        style={{
          width: "100%",
          height: "100%",
        }}
      >
        <SwiperGird />
      </div>
      {/* 品牌专区 */}
      <div className="shop-box-pinpai">
        <div className="shop-box-pinpai-title">
          <h2>品牌专区</h2>
          <span style={{ fontSize: "19px" }}>
            <Arrow />
          </span>
        </div>
        <div className="shop-box-pinpai-content">
          <img src={hua} alt="" />
          <img src={hua} alt="" />
          <img src={hua} alt="" />
          <img src={hua} alt="" />
        </div>
      </div>
      {/* 推荐商品 */}
      <div className="shop-box-tuijian">
        <Tabs>
          <Tabs.Tab title="精选热销" key="fruits">
            {/* 渲染数据 */}
            <TabsShop />
          </Tabs.Tab>
          <Tabs.Tab title="男性健康" key="vegetables">
            <TabsShop />
          </Tabs.Tab>
          <Tabs.Tab title="女性养护" key="woman">
            <TabsShop />
          </Tabs.Tab>
          <Tabs.Tab title="家庭常备" key="animals">
            <TabsShop />
          </Tabs.Tab>
        </Tabs>
      </div>
    </div>
  );
};

export default Index;
